<template>
	<div style="background: #F3F4F5;">

		<el-row>
			<el-col :span="6" style="border: 1px solid lightgrey;background-color: #fff;padding:5px">
				<left-container @on-selected="selectNode"></left-container>
			</el-col>
			<el-col :span="18" style="padding: 8px;">
				<div style="background-color: rgb(255, 255, 255);display: flex;justify-content: space-between;">
					<div style="display: flex;">
						<div style="width: 10px;background: #409EFF;" />
						<span style="margin-left: 8px;font-weight: bold;">设备信息</span>
					</div>
					<div>
						<el-button type="primary" size="mini" icon="el-icon-refresh"
							@click="refreshData" :loading="loading" :disable="loading">刷新设备信息</el-button>
					</div>
				</div>
				<div style="background-color: #fff;height: 80vh;overflow: auto;padding: 8px;">

					<el-row :gutter="20">

						<el-col :span="6">
							<el-input v-model="result.manufacturerId">
								<template slot="prepend">制造商ID</template>
							</el-input>
						</el-col>

						<el-col :span="6">
							<el-input v-model="result.terminalModel">
								<template slot="prepend">终端型号</template>
							</el-input>
						</el-col>

						<el-col :span="6">
							<el-input v-model="result.terminalNumber">
								<template slot="prepend">终端ID</template>
							</el-input>
						</el-col>

						<el-col :span="6">
							<el-input v-model="result.terminalIccid">
								<template slot="prepend">终端SIM卡ICCID</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input v-model="result.terminalHardNumber">
								<template slot="prepend">终端硬件版本号</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input v-model="result.terminalGjNum">
								<template slot="prepend">终端固件版本号</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isKycl)">
								<template slot="prepend">是否适用客运车辆</template>
							</el-input>
						</el-col>
						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isWxpcl)">
								<template slot="prepend">是否适用危险品车辆</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isPthycl)">
								<template slot="prepend">是否适用普通货运车辆</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isCzccl)">
								<template slot="prepend">是否适用出租车辆</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isYplx)">
								<template slot="prepend">是否支持硬盘录像机</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="result.jx">
								<template slot="prepend">机型</template>
							</el-input>
						</el-col>
						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isGPS)">
								<template slot="prepend">是否支持GPS定位</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isBeidou)">
								<template slot="prepend">是否支持北斗定位</template>
							</el-input>
						</el-col>
						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isGLONASS)">
								<template slot="prepend">是否支持GLONASS定位</template>
							</el-input>
						</el-col>
						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isGalileo)">
								<template slot="prepend">是否支持Galileo定位</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isGPRStx)">
								<template slot="prepend">是否支持GPRS通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isCDMAtx)">
								<template slot="prepend">是否支持CDMA通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isTDSCDMAtx)">
								<template slot="prepend">是否支持TD-SCDMA通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isWCDMAtx)">
								<template slot="prepend">是否支持WCDMA通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isCDMA2000tx)">
								<template slot="prepend">是否支持CDMA2000通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isTDLTEtx)">
								<template slot="prepend">是否支持TD-LTE通信</template>
							</el-input>
						</el-col>

						<el-col :span="6" style="margin-top: 10px;">
							<el-input :value="getSf(result.isQttx)">
								<template slot="prepend">是否支持其他通信</template>
							</el-input>
						</el-col>




					</el-row>



				</div>
			</el-col>
		</el-row>


	</div>
</template>

<script>
	import leftContent from './sbxx/left/left-container.vue'

	import {
		getSbxx,
		getSbxxZDRS
	} from '@/api/ywgl.js'


	export default {
		components: {
			'left-container': leftContent
		},
		data() {
			return {
				curRow: null,
				
				result: {

				},
				requestCount: 0,
				countTime: new Date(),
				intervalId: null,
				loading:false
			}
		},
		methods: {
			getSf(val) {
				if (val===true) {
					return '是'
				} else if(val===false){
					return '否'
				}
			},
			startSendingRequests() {
				this.countTime = new Date()
				this.intervalId = setInterval(() => {
					const elapsedTime = Date.now() - this.countTime;
					if (elapsedTime >= 60000) {
						clearInterval(this.intervalId);
						this.loading=false
						this.$message({
							message: '终端未响应',
							type: 'warning'
						})
						return;
					}

					getSbxxZDRS({
						vehId: this.curRow.id,
						simNo: this.curRow.simNo,
						isRefresh: true
					}).then(res => {
						if (res.code === 200) {
							clearInterval(this.intervalId);
							console.log('请求成功，已停止发送请求');
							this.loading=false
							this.result = res.data
						}

					})
					this.requestCount++;
					if (this.requestCount >= 60 && !this.responseData) {
						clearInterval(this.intervalId);
						this.loading=false
						console.log('已发送60次请求但未成功，停止发送请求');
					}
				}, 1000);
			},


			selectNode(val) {
				if (val.type === 'car') {
					this.curRow = val
					getSbxx({
						vehId: val.id,
						simNo: val.simNo,
						isRefresh: false
					}).then(res => {
						if (res.code === 200) {
							if (!res.data) {
								this.result={}
								return
							} else {
								this.result = res.data
								console.log(this.result)
							}
						}
					})
				}
			},
			refreshData() {
				
				if(this.curRow){
					this.loading=true
					getSbxx({
						vehId: this.curRow.id,
						simNo: this.curRow.simNo,
						isRefresh: true
					}).then(res => {
						if (res.code === 200) {
							this.startSendingRequests()
						}
					})
				}
				
			}
		}


	}
</script>

<style>
</style>